<template>
	<view class="receive">
		<view class="user">
			<view class="avatar" :style="{background: data.rand_color}">{{data.h_name}}</view>
			<view class="username">{{data.name}}</view>
			<view class="editbtn" @click="editShow = true">去修改</view>
		</view>
		<view class="container">
			<view class="board">
				<image class="board-bg" src="../../static/image/dataBg2.png" mode="aspectFill"></image>
				<view class="board-line">
					<view class="board-data">
						<view class="board-data-value symbol">￥{{data.send_money || 0}}</view>
						<view class="board-data-title">随礼总金额</view>
					</view>
					<view class="board-data">
						<view class="board-data-value">{{data.send_number}}</view>
						<view class="board-data-title">随礼总笔数</view>
					</view>
				</view>
				<view class="board-line">
					<view class="board-data">
						<view class="board-data-value symbol">￥{{data.get_money || 0}}</view>
						<view class="board-data-title">收礼总金额</view>
					</view>
					<view class="board-data">
						<view class="board-data-value">{{data.get_number}}</view>
						<view class="board-data-title">收礼总笔数</view>
					</view>
				</view>
			</view>
			<view class="main">
				<view class="tab">
					<view class="tab-title">随礼记录</view>
					<image class="add-icon" src="../../static/image/add.png" mode="aspectFit" @click="show = true">
					</image>
				</view>
				<scroll-view class="scroll-view" scroll-y>
					<view class="list">
						<view class="list-item" v-for="item in list" :key="item.id">
							<view class="list-item-line">
								<text class="date">{{item.date}}</text>
								<!-- <view class="label">我的人情簿</view> -->
							</view>
							<view class="list-item-line">
								<view class="line-left">
									<view class="icon">{{item.type_text}}</view>
									<text class="username">{{item.matter}}</text>
								</view>
								<view class="line-right">
									<text>￥{{item.money}}</text>
								</view>
							</view>
							<view class="list-item-line">
								<text class="address">{{item.remark}}</text>
							</view>
						</view>
					</view>
					<m-empty v-if="!list.length" image="../../static/image/empty1.png" title="暂未添加随礼" tip="快去添加您的第一个随礼吧~" btnText="添加随礼"
						@btnClick="show = true"></m-empty>
				</scroll-view>
			</view>
		</view>
		<u-popup :show="editShow" :round="20" closeable @close="editShow = false" mode="bottom">
			<view class="wrapPopup">
				<view class="pop-title">修改名称</view>
				<u--form :model="userData" :rules="userRules" ref="userForm" labelWidth="200rpx">
					<u-form-item label="姓名" prop="name" borderBottom required>
						<u--input v-model="userData.name" placeholder="请输入姓名" clearable></u--input>
					</u-form-item>
				</u--form>
				<view class="btn" @click="editSubmit">提交</view>
			</view>
		</u-popup>
		<u-popup :show="show" :round="20" closeable @close="show = false" mode="bottom">
			<view class="wrapPopup">
				<view class="pop-title">新增送礼</view>
				<u--form :model="formData" :rules="rules" ref="uForm" labelWidth="200rpx">
					<u-form-item label="回礼事项" prop="matter" borderBottom required>
						<u--input v-model="formData.matter" placeholder="请输入回礼事项" clearable></u--input>
					</u-form-item>
					<u-form-item label="金额" prop="money" borderBottom required>
						<u--input v-model="formData.money" placeholder="请输入金额" type="digit" clearable></u--input>
					</u-form-item>
					<u-form-item label="礼品" prop="gift" borderBottom>
						<u--input v-model="formData.gift" placeholder="请输入礼品" clearable></u--input>
					</u-form-item>
					<u-form-item label="时间" prop="date" borderBottom>
						<picker mode="date" @change="bindDateChange">
							<u--input v-model="formData.date" placeholder="请选择时间" suffixIcon="calendar-fill"
								suffixIconStyle="fontSize:50rpx" :customStyle="{background:'#fff'}" disabled></u--input>
						</picker>
					</u-form-item>
					<u-form-item label="地址" prop="address" borderBottom>
						<u--input v-model="formData.address" placeholder="请输入地址" clearable></u--input>
					</u-form-item>
					<u-form-item label="备注" prop="remark" borderBottom labelPosition="top">
						<u--textarea v-model="formData.remark" placeholder="请输入备注(120字以内)" count maxlength="120"
							clearable></u--textarea>
					</u-form-item>
				</u--form>
				<view class="btn" @click="submit">提交</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		get,
		post
	} from '../../static/utils/request'
	import {
		Friend,
		Receive,
		Send,
		User
	} from '../../static/utils/service'
	import {
		Loading,
		Routes,
		Toast
	} from '../../static/utils/utils'
	export default {
		data() {
			const time = new Date()
			const startDate = `${time.getFullYear()}-${time.getMonth()+1}-${time.getDate()}`
			return {
				startDate,
				friendId: '',
				data: {},
				list: [],
				editShow: false,
				show: false,
				userData: {
					name: '',
				},
				userRules: {
					'name': {
						required: true,
						message: '请输入姓名',
						trigger: ['blur', 'change']
					}
				},
				formData: {
					matter: '',
					money: '',
					gift: '',
					date: startDate,
					address: '',
					remark: ''
				},
				rules: {
					'matter': {
						required: true,
						message: '请输入回礼事项',
						trigger: ['blur', 'change']
					},
					'money': [{
							required: true,
							message: '请输入金额',
							trigger: ['blur', 'change']
						},
						{
							type: 'number',
							message: '请输入数字',
						}
					]
				},
			}
		},
		onReady() {
			this.$refs.userForm.setRules(this.userRules)
			this.$refs.uForm.setRules(this.rules)
		},
		onLoad(e) {
			this.friendId = e.friendId
			this.init()
		},
		methods: {
			async init() {
				Loading.show('加载中')
				this.eventChannel = this.getOpenerEventChannel()
				this.formDataOrg = {
					...this.formData
				}
				await Promise.all([this.getData(), this.getList()])
				Loading.hidden()
			},
			async getData() {
				const {
					code,
					data
				} = await get(Friend.detail, {
					id: this.friendId
				})
				data.h_name = data.name.charAt(0)
				this.userData.name = data.name
				this.data = data
			},
			async getList() {
				const {
					code,
					data
				} = await get(Receive.lists, {
					relatives_friends_id: this.friendId,
					keywords: '',
					type: 2
				})
				this.list = data.lists
			},
			editSubmit() {
				this.$refs.userForm.validate().then(async (res) => {
					const params = {
						...this.userData,
						id: this.friendId
					}
					const {
						code,
						msg
					} = await post(Friend.edit, params, '提交中')
					if (code == 1) {
						this.editShow = false
						this.getData()
						this.eventChannel.emit('updateName', params)
					}
				}).catch(err => {
					Toast.error('请完善信息')
				})
			},
			submit() {
				this.$refs.uForm.validate().then(async (res) => {
					const params = {
						...this.formData,
						relatives_friends_id: this.friendId
					}
					const {
						code,
						msg
					} = await post(Send.add, params, '提交中')
					if (code == 1) {
						this.show = false
						this.getData()
						this.getList()
						this.formData = {
							...this.formDataOrg
						}
						this.$refs.uForm.resetFields()
					} else Toast.none(msg)
				}).catch(err => {
					Toast.error('请完善信息')
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		background-color: #f8f8f8;
	}

	.receive {
		height: 100%;
		display: flex;
		flex-direction: column;

		.user {
			position: relative;
			padding: 30rpx 30rpx 0;
			display: flex;
			align-items: center;

			.avatar {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				text-align: center;
				line-height: 100rpx;
				color: #fff;
			}

			.username {
				margin-left: 20rpx;
			}

			.editbtn {
				position: absolute;
				right: 0;
				top: 40%;
				padding: 15rpx 25rpx;
				border-radius: 100rpx 0 0 100rpx;
				background-color: #f7e7e7;
				font-size: 24rpx;
				color: #f05948;
			}
		}

		.container {
			flex: 1;
			padding: 30rpx;
			display: flex;
			flex-direction: column;
			overflow: hidden;

			.board {
				padding: 40rpx 0 0 80rpx;
				position: relative;
				height: 320rpx;

				.board-bg {
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 100%;
					z-index: -1;
				}

				.board-line {
					display: flex;

					&:nth-of-type(n + 2) {
						margin-top: 25rpx;
					}

					.board-data {
						flex: 1;

						.board-data-value {
							color: #fff;
							font-size: 40rpx;
						}

						.symbol {
							transform: translateX(-.2em);
						}

						.board-data-title {
							margin-top: 20rpx;
							color: #fbbfb7;
							font-size: 24rpx;
						}
					}
				}
			}

			.main {
				margin-top: 20rpx;
				flex: 1;
				background-color: #fff;
				border-radius: 20rpx;
				overflow: hidden;
				display: flex;
				flex-direction: column;

				.tab {
					padding: 25rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.add-icon {
						width: 50rpx;
						height: 50rpx;
					}
				}

				.scroll-view {
					flex: 1;
					overflow: hidden;
					background-color: #fff;

					.list {
						padding: 25rpx;

						.list-item {
							padding: 25rpx 0;
							border-bottom: 1rpx solid #efefef;

							.list-item-line {
								display: flex;
								align-items: center;
								justify-content: space-between;

								&:nth-child(n + 2) {
									margin-top: 20rpx;
								}

								.date {
									color: #aaa;
									font-size: 28rpx;
								}

								.label {
									padding: 6rpx 14rpx;
									background-color: #fdf4f5;
									border-radius: 8rpx;
									color: #f05948;
									font-size: 24rpx;
								}

								.line-left {
									display: flex;
									align-items: center;

									.icon {
										margin-right: 20rpx;
										width: 80rpx;
										height: 80rpx;
										border-radius: 15rpx;
										background-color: #f05948;
										text-align: center;
										line-height: 80rpx;
										color: #fff;
									}

									.username {
										font-size: 28rpx;
									}
								}

								.address {
									color: #aaa;
									font-size: 30rpx;
								}

								.sign {
									width: 80rpx;
									height: 80rpx;
								}
							}
						}

					}
				}

			}
		}

		/deep/.u-popup {
			flex: inherit !important;
		}

		.wrapPopup {
			padding: 0 40rpx 80rpx;

			.pop-title {
				padding: 50rpx 0 25rpx;
				text-align: center;
			}

			.btn {
				margin-top: 50rpx;
				height: 80rpx;
				border-radius: 80rpx;
				background-color: #f05948;
				text-align: center;
				line-height: 80rpx;
				color: #fff;
			}
		}
	}
</style>